<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
		</cu-custom>
		<view>
			<view class="content-nav padding-xs bg-white">
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
					<view class="cu-item" @click="loadPaylog(index)" :class="selector.state==index?'cur':''" v-for="(state, index) in data.states" :key="index">
						{{state}}
					</view>
				</scroll-view>
			</view>
			<view class="padding-bottom">
				<view class="padding text-empty" v-if="data.paylogs.length==0">
					<text>空空如也</text>
				</view>
				<view class="cu-card article" v-else>
					<view class="cu-item shadow padding-xs" style="padding-bottom: 20upx;" v-for="(item, index) in data.paylogs" :key="index">
						<view class="flex solid-bottom padding-xs justify-between margin-bottom-sm">
							<view class="text-grey">
								<text>订单号：{{item.tid}}</text>
							</view>
							<view class="price text-red text-xl">
								<text>+</text>{{item.brokerage}}元
							</view>
						</view>
						<view class="content" :data-url="item.setting.redirect" @click="naviTo(item.setting.redirect)" style="padding-left: 10upx;">
							<image :src="item.setting.cover" mode="aspectFill"></image>
							<view class="desc">
								<view class="title" style="padding-left: 0;"><view class="text-cut">{{item.setting.title}}</view></view>
								<view class="text-content">
									{{item.setting.summary}}
									<view class="text-lg" :class="'text-'+item.style">{{item.state}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="data.paylogs.length>0" class="margin-top" :status="loadmore" :contentText="contentText"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	
	export default {
		components: {uniLoadMore},
		data() {
			return {
				selector:{
					state:0,
					page:1
				},
				loadmore:'more',
				contentText:{
					"contentdown":"加载更多数据",
					"contentrefresh":"加载中...",
					"contentnomore":"我是有底线的~"
				},
				data:{
					title:"我的订单",
					paylogs:[],
					states:["全部", "待评价", "已完成", "已失效"]
				}
			}
		},
		onLoad() {
			if(core.userinfo.uid<=0) return core.toast('请先登录','login');
			this.loadPaylog(this.selector.state,1);
		},
		onPullDownRefresh(){
			this.loadPaylog(this.selector.state,1);
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if(this.loadmore=='noMore') return;
			this.loadPaylog(this.selector.state,this.selector.page+1);
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res, true);
					}
					that.data = res;
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			loadPaylog(status, page=1){
				this.selector.state = status;
				this.selector.page = page;
				var that = this;
				this.initData('lector/order',this.selector,function(res){
					that.loadmore = res.paylogs.length<15 ? 'noMore' : 'more';
				});
			},
			unSupport(){
				return core.toast('敬请期待');
			}
		}
	}
</script>

<style>
	page{background: #F7F7F7;}
</style>